iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 21
0
Mobile Development

Android 從零開始系列 第 21

[Day21] SeekBar(拖動條)

  • 分享至 

  • xImage
  •  

這次我們要學習的是拖動條——SeekBar,最常見的地方就是音樂播放器或者視頻播放器了,音量控制或者播放進度控制,都用到了這個SeekBar,在APP中算是非常常見的元件之一。

XML

開啟activity_main.xml,創一個SeekBar元件。接著再創建一個TextView用於顯示SeekBar目前的進度。

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="當前位置:0 / 100 "/>

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/text"
        android:maxHeight="5.0dp"
        android:minHeight="5.0dp" />

</RelativeLayout>

JAVA程式碼

接下來要實作SeekBar被觸發後的功能,而這個動作必須要有監聽器及觸發內容。我們先以setOnSeekBarChangeListener來設置監聽,並且在其中監聽SeekBar並未三中狀態寫下觸發事件,三中狀態分別是按下、拖動以及放開。
按下的事件要寫在onStartTrackingTouch中
拖動的事件要寫在onProgressChanged中,參數progress則是目前位置
放開的事件要寫在onStopTrackingTouch中

public class MainActivity extends AppCompatActivity {

    private SeekBar seekBar;
    private TextView text;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        seekBar = findViewById(R.id.seekBar);
        text = findViewById(R.id.text);

        seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                text.setText("當前位置:" + progress + "  / 100 ");
            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this, "按下SeekBar", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {
                Toast.makeText(MainActivity.this, "放開SeekBar", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

成果

圖片


上一篇
[Day20] ScrollView滾動視圖
下一篇
[Day22] ScrollView和SeekBar搭配應用
系列文
Android 從零開始30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言